<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,address=no"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mobiscroll.jquery.min.css"/>

    <style>
        .z_status{
            background:url("../img/arrow.png")no-repeat 65% center;
            background-size:0.19rem 0.1rem;
            width:50%;
            height:100%;

        }
        .z_arrow{
            background:url("../img/arrow_o.png")no-repeat 65% center;
            background-size:0.19rem 0.1rem;
            width:50%;
            height:100%;
        }
        .z_type{
            background:url("../img/arrow.png")no-repeat 65% center;
            background-size:0.19rem 0.1rem;
            width:50%;
            height:100%;
        }
        .ef8200{
            background-color:#ef8200;
        }
        .z_co{
            color:#7cc0f0;
        }
    </style>
</head>
<body>
<div>
    <div class="mb20 bw">
        <p class="flex_sa ptb24 bdb"><span class="z_status tac">状态</span><span class="z_type tac">角色</span></p>
        <!--<div class="dpn sta">-->
        <!--<p class="flex flex_column pl30">-->
        <!--<span class="ptb24">全部</span>-->
        <!--<span class="ptb24">启用</span>-->
        <!--<span class="ptb24">禁止</span>-->
        <!--</p>-->
        <!--</div>-->
        <!--<div class="dpn ty">-->
        <!--<p class="flex flex_column pl30">-->
        <!--<span class="ptb24">全部</span>-->
        <!--<span class="ptb24">区代理</span>-->
        <!--<span class="ptb24">个人代理</span>-->
        <!--</p>-->
        <!--</div>-->
    </div>
    <div class="bw plr30 pt24 z_item">

    </div>
</div>
<p class="tac mt100" style="width:100%;" onclick="location.href='zl_addStaff.html'">
    <button class="ptb24 font16 colw ef8200 border-r6" style="width:85%;">添加员工</button>
</p>
</body>
</html>
<script src="../js/jquery.min.js"></script>
<script src="../js/mobiscroll.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/dlc.js"></script>
<script>
    $('.z_status').mobiscroll().scroller({
        theme: 'ios',
        wheels:[
            [{
                data:['启用', '禁止']
            }]
        ],
        display: 'bottom',
        headerText:'状态',
        lang: 'zh',
        onBeforeClose: function (event, inst) {
            if (event.button == 'set') {
                console.log(event.valueText);
                if(event.valueText=='启用'){
                    status=1;
                    list("",status)
                }else{
                    status=2;
                    list("",status)
                }
            }
        }

    });

    $('.z_type').mobiscroll().scroller({
        theme: 'ios',
        wheels:[
            [{
                data:[ '运维', '财务']
            }]
        ],
        display: 'bottom',
        headerText:'角色',
        lang: 'zh',
        onBeforeClose: function (event, inst) {
            if (event.button == 'set') {
                console.log(event.valueText);
                if(event.valueText=='运维'){
                    type = 3;
                    list(type,"")
                }else{
                    type = 4;
                    list(type,"")
                }
            }
        }

    });

//    员工列表

    list("","");
   function list(type,status){
       dlctipbox.loading();
       dlc_request('/api/employee/listEmployee', { type:type,status:status }, function(res) {
           console.log(res);
           dlctipbox.clear();
           $('.z_item').children().remove();
           var html='';
           res.data.forEach(function(item,index){
               html+='<div><p class="pt20 flex_sb"><span>'+(item.type==4?"财务人员":"运维人员")+'<em>'+item.name+'</em></span><span class="z_co">'+(item.status==1?"启用":"已禁用")+'</span></p>\n' +
                   '        <p class="pt10 col9"><span>手机号：'+item.phone+'</span></p>\n' +
                   '        <p class="ptb20 flex_a jce">\n' +
                   '            <span class="flex_a bianji" data-id="'+item.id+'"><img src="../img/bianji.png" class="mr10" style="width:0.3rem;height:0.3rem;"><span class="bj mr30">编辑</span></span>\n' +
                   '            <span class="flex_a delz" data-idx="'+item.id+'"><img src="../img/delete.png" class="mr10" style="width:0.3rem;height:0.31rem;"><span class="z_del" >删除</span></span>\n' +
                   '        </p></div>'
           })
           $('.z_item').append(html);
       })
   }

//   编辑员工
    $('.z_item').on('click','.bianji',function(){
        location.href='staff_edit.html?id='+$(this).data('id');
    })

//    删除员工
    $('.z_item').on('click','.delz',function(){
        var that = this;
        dlctipbox.confirm('确定要删除员工？',function(index){
            if(index==1){
                dlctipbox.loading();
                dlc_request('/api/employee/deleteEmployee', { agentId:$(that).data('idx') }, function(res) {
                    console.log(res)
                    dlctipbox.clear();
                    if(res.code==1){
                        dlctipbox.show('删除成功')
                        setTimeout(function(){
                            list("","");
                        },1500)
                    }
                })
            }
        })
    })
</script>